<template>
    <div class="mui-content orderCar">
        <!--车辆信息-->
        <ul class="mui-table-view">
            <li class="mui-table-view-cell" v-link="{name:'carBrandList',params:{from:'orderCar'}}">
                <a class="mui-navigate-right text2">汽车品牌
                    <span class="mui-pull-right color2 mgr1" id="carBrandValue">{{carBrand}}{{carModel}}</span>
                </a>
            </li>
            <li class="mui-table-view-cell"  @click="changeCarNumber()" id="carNumber">
                <a class="text2 mui-navigate-right">车牌号<span class="mui-pull-right color2 mgr1">{{carPlateNumber}}</span></a>
            </li>
            <li class="mui-table-view-cell"  @click="changePrice()" id="carPrice">
                <a class="text2 mui-navigate-right">车价<span class="mui-pull-right color2 mgr1">{{carBuyPrice|carPriceFilter}}</span></a>
            </li>
            <li class="mui-table-view-cell" @click="datePicker()" id="buyTime"  data-options='{"type":"month","beginYear":2000}'>
                <a class="text2 mui-navigate-right">购买时间
                    <span class="mui-pull-right color2 mgr1">{{carBuyDate}}</span>
                </a>
            </li>
        </ul>
        <div class="operateBtn">
            <button class="mui-btn mui-btn-primary" @click="confirm()">确认</button>
        </div>
    </div>
</template>
<style>
    .mui-popup-input input[type='text']{height: 0.8rem; font-size: 0.3rem;}
    .orderCar #carNumInput{border: 0; height: 0.45rem; line-height: 0.45rem;  text-align: left; width: 2rem;}
</style>
<script type="text/ecmascript-6">
    import footerNavComponent from '../../components/footer-nav/footer-nav.vue';
    import datePickerComponent from '../../components/date-picker/date-picker.vue';
    import pickerComponent from '../../components/picker/picker.vue';
    import '../../fonts/mui.css';
    import Page from '../../base/Page'
    import { API } from '../../config/constants'
    export default new Page({
        vuex:{
    			actions:{
    				updOrderCar:function({dispatch},data){
    					dispatch('UPD_ORDER_CAR',data);
    				}
    			},
    			getters:{
    				carPlateNumber:function(state){
    					return state.order.car.carPlateNumber;
    				},
    				carBrand:function(state){
                        return state.order.car.carBrand;
                    },
    				carModel:function(state){
    					return state.order.car.carModel;
    				},
    				carBuyPrice:function(state){
    					return state.order.car.carBuyPrice;
    				},
    				carBuyDate:function(state){
    					return state.order.car.carBuyDate;
    				},
    				carBrandImage:function(state){
    					return state.order.car.carBrandImage;
    				}
    			}
    	},
        data(){
            return{
                orderCar:{carBrandImage:'',carPlateNumber:'',carBrand:'',carModel:'',carBuyPrice:'',carBuyDate:''},
            	priceSelect:[{value: 'P01',text: '10万以内'},{value: 'P02',text: '10万~15万'},{value: 'P03',text: '15万~20万'}]
            }
        },
        ready () {
            mui.init();

            this.orderCar.carPlateNumber = this.carPlateNumber;
            this.orderCar.carBrand = this.carBrand;
            this.orderCar.carModel = this.carModel;
            this.orderCar.carBuyPrice = this.carBuyPrice;
            this.orderCar.carBuyDate = this.carBuyDate;
            this.orderCar.carBrandImage = this.carBrandImage;

            //下拉框初始化数据
            this.getJSON(API.GET_DICT_LIST, {key:'CAR_PRICE_RANGE'}, res => {
                this.priceSelect = res.resultData;
            });
        },
        components:{
            footerNavComponent,
            datePickerComponent,
            pickerComponent
        },
        methods: {
            datePicker: function () {
                let that = this;
                (function ($) {
                    $.init();
                    var buyTime= document.getElementById('buyTime');
                    var buyTimeValue = buyTime.getElementsByTagName('span')[0];
                    var optionsJson = buyTime.getAttribute('data-options') || '{}';
                    var options = JSON.parse(optionsJson);
                    var now=new Date();
                    options.endYear=now.getFullYear();
                    options.endMonth=now.getMonth()+1;
                    options.endDay=now.getDate();
                    var id = buyTime.getAttribute('id');
                    var picker = new $.DtPicker(options);
                    picker.show(function (rs) {
                        buyTimeValue.innerText = rs.text;
                        that.orderCar.carBuyDate = rs.text;
                        picker.dispose();
                    });
                })(mui);
            },
            changePrice:function () {
            	let that = this;
                (function($, doc) {
                    $.init();
                    $.ready(function() {
                        //普通示例
                        var userPicker = new $.PopPicker();
                        userPicker.setData(that.priceSelect);
                        var userReason=doc.getElementById('carPrice').getElementsByTagName('span')[0];
                        userPicker.show(function(items) {
                            userReason.innerText = items[0].text;
                            that.orderCar.carBuyPrice = items[0].value;
                        }, false);
                    });
                })(mui, document);
            },
            changeCarNumber:function () {
                let that = this;
                var carNumber=mui('#carNumber span')[0];
                var a=carNumber.innerText;
                var input = "<input type='text' id='carNumInput' placeholder='请输入车牌号' value=''/>";
                carNumber.innerHTML=input;
                var carNumInput=document.getElementById('carNumInput');
                carNumInput.addEventListener('tap',function () {
                    return false;
                });
                /*文本框获取焦点*/
                carNumInput.focus();
                carNumInput.addEventListener('blur',function () {
                    var newtxt = carNumInput.value;
                    //判断文本有没有修改
                    if (newtxt != a) {
                        if (newtxt == ''){
                            carNumber.innerText=a;
                        }else {
                            carNumber.innerText=newtxt;
                        }
                    }
                    else {
                        carNumber.innerText=a;
                    }

                    //set to data param
                    that.orderCar.carPlateNumber = carNumber.innerText;
                })
                //文本框失去焦点后提交内容，重新变为文本
            },
            confirm:function () {
                //api update order car
                let that = this;
                //set to store
                this.updOrderCar(that.orderCar);
                var flag=true;
                for(let i in that.orderCar){
                    console.log(that.orderCar[i])
                    if(that.orderCar[i]==null||that.orderCar[i]==""){
                        mui.toast('请完善车辆信息');
                        flag=false;
                        return;
                    }
                };
                if(flag){
                    this.$route.router.go('/banpen/step1/');
                }
            }

        }
    })

</script>